import React, { useEffect, useState } from "react";
import store from "store2";
import Header from "./components/Header/Index";
import List from "./components/List/index";
import Footer from "./components/Footer/index";
import "./App.css";
import { createContext } from "react";
export const Appcontxt = createContext();
export default function App() {
  const [data, setData] = useState(
    store("@@notelist") || [
      { id: 1, name: "Jack", done: true },
      { id: 2, name: "Rose", done: true },
      { id: 3, name: "Dick", done: false },
    ]
  );
  useEffect(() => {
    store.set("@@notelist", data);
  }, [data]);
  //添加
  const addTodo = (todoObj) => setData([todoObj, ...data]);

  //修改
  const handleUpdata = (event) => {
    setData(
      data.map((item) => {
        if (item.id === event) {
          item.done = !item.done;
        }
        return item;
      })
    );
  };
  //删除
  const handleDel = (val) => setData(data.filter((item) => item.id !== val));
  // 全选
  const handlecheckAll = (done) => {
    setData(data.map((item) => ({ ...item, done })));
  };
  // 清除全部
  const handleClearAll = () => {
    setData(data.filter((item) => item.done === false));
  };
  return (
    <div className="todo-container">
      <div className="todo-wrap">
        <Appcontxt.Provider value={{ handleUpdata, handleDel }}>
          <Header addTodo={addTodo} />
          <List data={data} />
          <Footer
            data={data}
            handlecheckAll={handlecheckAll}
            handleClearAll={handleClearAll}
          />
        </Appcontxt.Provider>
      </div>
    </div>
  );
}
